<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
                <f7-link @click="$f7router.back()">
                    <f7-icon icon="icon-back" style="margin-left: 15px;"></f7-icon>
                </f7-link>
            </f7-nav-left>
            <f7-nav-title title="户型图"></f7-nav-title>
            <f7-nav-right v-if="editable && !hasPointValue">
                <f7-link @click="pointRevoke">撤销</f7-link>
            </f7-nav-right>
        </f7-navbar>
        <f7-block style="position:relative; margin-top:20px; margin-bottom:0; margin-left:10px; margin-right:10px; padding:0px;">
            <img :src="imageUrl" @load="imageLoaded"
                style="width:100%; height:100%; border:1px solid black;"
                @click="pointAdd" />
            <div v-if="img.width != 0" v-for="(point, i) in points" :key="i"
                style="position:absolute; width:10px; height:10px; border-radius:5px;"
                :style="pointStyle(i)"
                @click="pointClick(i)">
            </div>
        </f7-block>
        <f7-row style="margin-top:10px; margin-bottom:10px;"
            v-for="(value, i) in points" v-if="hasPointValue && (i % 4 == 0)" :key="i">
            <f7-col v-for="j in 4" :key="i + '-' + j">
                <f7-button v-if="i + j - 1 < points.length" @click="pointClick(i + j - 1)"
                    :id="'value-image-btn-' + (i + j - 1)"
                    :fill="i + j - 1 == currentIndex">
                    {{points[i + j - 1].val}}
                </f7-button>
                <PopoverKeyboard :ref="'popoverKeyboard-' + (i + j - 1)" 
                    :index="i + j - 1" :count="points.length"
                    @delete="pointDelete(i + j - 1)"
                    @next="nextPointClick(i + j - 1)"
                    @change="pointChange(i + j - 1, $event)">
                </PopoverKeyboard>
            </f7-col>
        </f7-row>
    </f7-page>
</template>

<script>
import Common from "@/utils/Common.js";
import DateUtil from "@/utils/DateUtil.js";
import PopoverKeyboard from "@/components/PopoverKeyboard.vue";

export default {
    props: {
        editable: {
            type: Boolean,
            default: true
        },
        imageUrl: {
            type: String,
            default: ''
        },
        pointCount: {
            type: Number,
            default: 0
        },
        overPointCountMessage: {
            type: String,
            default: null
        },
        hasPointValue: {
            type: Boolean,
            default: false
        },
        initialPoints: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    components: {
    	PopoverKeyboard
    },
    data: function() {
        return {
            img: {
                width: 0,
                height: 0,
                naturalWidth: 0,
                naturalHeight: 0
            },
            points: [],
            currentIndex: -1
        };
    },
    methods: {
        imageLoaded: function(event) {
            this.img.width = event.target.width;
            this.img.height = event.target.height;
            this.img.naturalWidth = event.target.naturalWidth;
            this.img.naturalHeight = event.target.naturalHeight;
        },
        pointAdd: function(event) {
            if(!this.editable) {
                return;
            }
            if(this.points.length >= this.pointCount) {
                if(this.overPointCountMessage != null) {
                    this.$f7.dialog.alert('', this.overPointCountMessage);
                }
                return;
            }
            var x = (event.offsetX / this.img.width * this.img.naturalWidth).toFixed(2);
            var y = (event.offsetY / this.img.height * this.img.naturalHeight).toFixed(2);
            var point = {x: x, y: y};
            if(this.hasPointValue) {
            	point.val = 0;
            }
            this.points.push(point);
            this.currentIndex = this.points.length - 1;
            this.$emit('pointAdd', point);
            this.$f7router.emit('pointAdd', point);
        },
        pointChange: function(index, value) {
            var point = this.points[index];
            point.val = value;
            this.$emit('pointChange', point);
            this.$f7router.emit('pointChange', point);
        },
        pointDelete: function(index) {
            var point = this.points[index];
            this.points.splice(index, 1);
            this.$emit('pointDelete', point);
            this.$f7router.emit('pointDelete', point);
        },
        pointRevoke: function() {
            if(this.points.length > 0) {
                this.pointDelete(this.points.length - 1);
            }
        },
        pointStyle: function(index) {
            var x = this.points[index].x / this.img.naturalWidth * this.img.width;
            var y = this.points[index].y / this.img.naturalHeight * this.img.height;
            return {
                left: x + 'px',
                top: y + 'px',
                backgroundColor: index != this.currentIndex ? '#ff0000' : '#0000ff'
            };
        },
        pointClick: function(index) {
        	if(index < this.points.length) {
                if(this.editable) {
                    this.$refs['popoverKeyboard-' + index][0].open('#value-image-btn-' + index);
                }
                this.currentIndex = index;
        	}
        },
        nextPointClick: function(index) {
        	this.$refs['popoverKeyboard-' + index][0].close();
        	this.pointClick(index + 1);
        }
    },
    mounted: function() {
        for(var i = 0; i < this.initialPoints.length && i < this.pointCount; i++) {
            var point = {};
            Object.assign(point, this.initialPoints[i]);
            this.points.push(point);
        }
    }
}
</script>

<style scoped>

</style>
